<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<el-form slot="query" size="small" inline v-if="isExistQuery">
			<el-form-item><el-input placeholder="请输入姓名" v-model="queryData.createName" clearable /></el-form-item>
			<el-form-item><el-input placeholder="请输入账号" v-model="queryData.createAccount" clearable /></el-form-item>
			<el-form-item><el-input placeholder="请输入描述" v-model="queryData.description" clearable /></el-form-item>
			<el-form-item>
				<el-select v-model="queryData.smallModule" clearable placeholder="请选择业务模块" style="width: 145px">
					<el-option v-for="(item, index) in smallModules" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item><el-date-picker v-bind="dateConfig" v-model="dateTimeRange" style="width: 340px" /></el-form-item>
			<el-form-item><el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button></el-form-item>
		</el-form>
		<el-table slot="table" v-bind="tableConfig" :data="tableData">
			<el-table-column prop="createAccount" label="姓名和账号" min-width="158">
				<template slot-scope="{ row }">{{ row.createName }} ({{ row.createAccount }})</template>
			</el-table-column>
			<el-table-column prop="description" label="描述" min-width="158" show-overflow-tooltip></el-table-column>
			<el-table-column label="业务模块" min-width="130" :formatter="returnSmallModulesName"></el-table-column>
			<el-table-column prop="actionUrl" label="http方法" min-width="156" show-overflow-tooltip></el-table-column>
			<el-table-column label="日志等级" width="80" align="center" :formatter="returnLogLevelName"></el-table-column>
			<el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="170"></el-table-column>
			<el-table-column label="操作" fixed="right" :width="handleWidth" v-if="isHasAuthButton">
				<template slot-scope="{ row }">
					<el-button type="text" v-hasPermi="handleButtons.detail" @click="handleLookDetail(row)">详细</el-button>
				</template>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
		<log-detail v-model="detailDialog" :data="detailData"></log-detail>
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import moment from 'moment';
import logDetail from './detail';
import listMixins from '@/mixins/listMixins';
import { getLogTypeData } from '@/api/openApi';
import { getLogPageList } from '@/api/system/tbSysLog';
export default {
	name: 'logPage',
	mixins: [listMixins],
	components: { logDetail },
	data() {
		return {
			pageName: '日志',
			dateTimeRange: [],
			smallModules: [],
			logListData: [],
			detailDialog: false,
			detailData: {},
			dateConfig: {
				rangeSeparator: '至',
				type: 'datetimerange',
				endPlaceholder: '结束日期',
				startPlaceholder: '开始日期',
				valueFormat: 'yyyy-MM-dd HH:mm:ss'
			}
		};
	},
	computed: {
		listFunction() {
			return eval(getLogPageList);
		}
	},
	filters: {
		logLevelFilter(data) {
			switch (data) {
				case '1':
					return '提示';
				case '2':
					return '错误';
				case '3':
					return '警告';
				default:
					return '其他';
			}
		},
		logLevelColorFilter(data) {
			switch (data) {
				case '1':
					return 'success';
				case '2':
					return 'danger';
				case '3':
					return 'warning';
				default:
					return 'info';
			}
		}
	},
	mounted() {
		this.getLogEnumData();
	},
	methods: {
		async getLogEnumData() {
			let result = await getLogTypeData().then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.smallModules = datas.smallModule;
			}
		},

		//返回业务模块名称
		returnSmallModulesName(row) {
			let attrs = { size: 'small' };
			let info = lodash.find(this.smallModules, ['value', row.smallModule]);
			return this.$createElement('elTag', { attrs }, !info ? '--' : info.msg);
		},

		//返回日志登陆名称
		returnLogLevelName(row) {
			let attrs = { size: 'small' };
			if (row.level === '1') {
				attrs['type'] = 'success';
				attrs['text'] = '提示';
			} else if (row.level === '2') {
				attrs['type'] = 'danger';
				attrs['text'] = '错误';
			} else if (row.level === '3') {
				attrs['type'] = 'warning';
				attrs['text'] = '警告';
			} else {
				attrs['type'] = 'info';
				attrs['text'] = '其他';
			}
			return this.$createElement('elTag', { attrs }, attrs.text);
		},

		//查看详情
		handleLookDetail(data) {
			let info = lodash.find(this.smallModules, ['value', data.smallModule]);
			this.detailData = { ...data, moduleName: `${info.msg} / ${data.description}` };
			this.detailDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.system_log_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #fff;
}
</style>
